<template>
  <div class="m-deliver-manage">
    <!-- 订单商品类型 -->
    <div class="order-type">
      <div class="title" :class="{actived: params.orderMark == 0}" @click="onChangeType(0)">
        <span style="padding-right: 10px">普通订单</span>
      </div>
      <div class="title" :class="{actived: params.orderMark == 1}" @click="onChangeType(1)">
        <span style="padding-left: 10px">火拼订单</span>
      </div>
    </div>
    <!-- 搜索 -->
    <form class="form-inline">
      <div class="form-group">
        <w-label :must="false">订单编号</w-label>
        <w-input v-model="params.orderId" :validate="false"></w-input>
      </div>
      <div class="form-group">
        <w-label :must="false">下单时间</w-label>
          <w-datepicker v-model="params.addTimeStart"></w-datepicker>  
        <span>&nbsp;-&nbsp;</span>
        <w-datepicker v-model="params.addTimeEnd"></w-datepicker>
      </div>
      <div class="form-group">
        <w-label :must="false">买家</w-label>
        <w-input v-model="params.userName" :validate="false"></w-input>
      </div>
      <w-button type="main" @on-click="searchOrderListByParams" class="mar-l">搜索</w-button>
    </form>
    <!-- 内容列表 -->
    <list :list="orderLists" @refresh="handlerOrderList" :type="orderType" @refress-order="fetchCommOrderList"></list>
    <!-- 如果没有查到数据 -->
    <div class="no-img" v-show="!orderLists || orderLists.length == 0"></div>
    <!-- 分页 -->
    <w-paging v-show="params.totalPage > 1" :current="params.currentPage" :total="params.totalPage" @page="showNextPage"></w-paging>
  </div>
</template>

<script>
  import List from './list'

  // 获取接口
  import { apiOrder } from '../../common/api'

  export default {
    data() {
      return {
        params: {
          accessToken: this.$store.getters.token,
          orderStatus: 20,
          orderId: undefined,
          addTimeStart: undefined,
          addTimeEnd: undefined,
          userName: undefined,
          pageSize: 5,
          currentPage: 1,
          orderMark: 0,
          totalPage: 1
        },
        orderType: 0,
        btnIndex: this.$route.params.status == 20 ? 2 : 0,
        orderLists: []
      }
    },
    created() {
      this.fetchCommOrderList()
    },
    methods: {
      /**
       * 重置搜索参数
       */
      resetParams() {
        this.params = {
          accessToken: this.$store.getters.token,
          orderStatus: 20,
          orderId: undefined,
          addTimeStart: undefined,
          addTimeEnd: undefined,
          userName: undefined,
          pageSize: 5,
          currentPage: 1,
          totalPage: 1,
          orderMark: 0 // 判断当前是普通还是火拼订单，0：普通，1：火拼
        }
      },

      /**
       * 点击搜索按钮
       */
      searchOrderListByParams() {
        // 从新访问第一页数据
        this.params.currentPage = 1

        // 界面展示点击的订单状态按钮
        this.btnIndex = 0

        // 将当前订单状态设置为选中的状态
        this.params.orderStatus = undefined

        // 请求订单列表
        if (this.params.orderMark == 0) {
          this.params.pageSize = 5
          this.fetchCommOrderList()
        } else {
          this.params.pageSize = 2
          this.handlerOrderList()
        }
      },

      /**
       * 根据订单类型请求订单列表数据
       */
      onChangeType(type) {
        // 更改路由
        // this.$route.params.type = type
        // this.$router.push(`/deliver/${this.$route.params.type}`)
        // 先重置搜索参数
        this.resetParams()
        // 请求数据中添加商品类型参数
        this.params.orderMark = type
        // 标记当前的商品类型
        this.orderType = this.params.orderMark
        // 请求订单列表
        if (type == 0) {
          this.params.pageSize = 5
          this.fetchCommOrderList()
        } else {
          this.params.pageSize = 2
          this.handlerOrderList()
        }
      },
      /**
       * 获取普通订单列表
       */
      fetchCommOrderList() {
        apiOrder.apiGetCommOrderList(this.params).then(data => {
          this.orderLists = [{
            childOrderInfo: data.list
          }]
          this.params.currentPage = data.currentPage
          this.params.totalPage = data.totalPage
        })
      },

      /**
       * 获取并处理订单列表
       */
      handlerOrderList() {
        apiOrder.apiOrderList(this.params).then((data) => {
          this.orderLists = data.list

          // 将字符串装换成JSON对象
          this.orderLists.forEach((v) => {
            v.goodsGsp = JSON.parse(v.goodsGsp || '[]')
            v.goodsInventoryDetail = JSON.parse(v.goodsInventoryDetail || '[]')
            v.checkOutCount = 0

            // 遍历数据，累加已拼单量
            v.goodsInventoryDetail.forEach((v1) => {
              if (v1.specpropertyList && v1.specpropertyList.length > 0) {
                v1.checkOutCount = 0
                v1.specpropertyList.forEach((v2) => {
                  v1.checkOutCount += (v2.checkOutCount || 0)
                })
              }
              v.checkOutCount += v1.checkOutCount
            })
          })
          this.params.totalPage = data.totalPage
          this.params.currentPage = data.currentPage
        })
      },

      /**
       * 展示下一页
       */
      showNextPage(page) {
        // 从新访问第一页数据
        this.params.currentPage = page
        // 请求接口数据
        if (this.params.orderMark == 0) {
          this.params.pageSize = 5
          this.fetchCommOrderList()
        } else {
          this.params.pageSize = 2
          this.handlerOrderList()
        }
      }
    },
    components: {
      List
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';

  .m-deliver-manage {
    background-color: #fff;

    .btn-group {
      margin-top: 20px;
    }
    .form-inline {
      margin: 20px 0;
    }
    .order-type {
      margin-left: 10px;
      border-bottom: 1px solid #e3e3e3;
      margin-bottom: 20px;
      .title {
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        padding-bottom: 10px;
        &:last-child {
          &:after {
            content: '';
            border: none;
            margin: 0;
          }
        }
        &:after {
          content: '';
          width: 2px;
          height: 15px;
          color: #e3e3e3;
          border-right: 1px solid;
          // margin: 0 10px;
        }
      }
      .actived {
        color: $color-main;
        border-bottom: 1px solid $color-main;
      }
    }
    .datepicker-container {
      display: inline-block;
      width: 190px;
    }
  }
  .mar-l {
    margin-left: 30px;
  }
  .no-img {
    background-image: url('../../assets/icon_null.png');
    width: 270px;
    height: 340px;
    margin: 0 auto;
  }
</style>